

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/icon.png">
  <link rel="icon" href="/img/icon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="d-lue">
  <meta name="keywords" content="">
  
    <meta name="description" content="作用域js中只有函数作用域和全局作用域 1234567var scope=&amp;quot;global&amp;quot;;function t()&amp;#123;    console.log(scope);    var scope=&amp;quot;local&amp;quot;   //变量声明    console.log(scope);&amp;#125;t();  //undefined  local  es5之前，Js">
  
  
    <meta name="referrer" content="no-referrer-when-downgrade">
  
  
  <title>JavaScript笔记（一） - d-lue&#39; blog</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"dl_coisini.gitee.io","root":"/","version":"1.9.4","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":true,"follow_dnt":true,"baidu":"9c32ca7145bad202032b544e8bf27d19","google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
  

  
    <!-- Baidu Analytics -->
    <script async>
      if (!Fluid.ctx.dnt) {
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?9c32ca7145bad202032b544e8bf27d19";
          var s = document.getElementsByTagName("script")[0];
          s.parentNode.insertBefore(hm, s);
        })();
      }
    </script>
  

  

  

  

  

  

  



  
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 70vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>d-lue&#39;s blog</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                <span>首页</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                <span>归档</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                <span>分类</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                <span>标签</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                <span>关于</span>
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              <i class="iconfont icon-search"></i>
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">
              <i class="iconfont icon-dark" id="color-toggle-icon"></i>
            </a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/img/bg/wenzhang.png') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="JavaScript笔记（一）"></span>
          
        </div>

        
          
  <div class="mt-3">
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2023-04-27 00:00" pubdate>
          2023年4月27日 凌晨
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          9k 字
        
      </span>
    

    
      <span class="post-meta mr-2">
        <i class="iconfont icon-clock-fill"></i>
        
        
        
          76 分钟
        
      </span>
    

    
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      

    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">JavaScript笔记（一）</h1>
            
            
              <div class="markdown-body">
                
                <h3 id="作用域"><a href="#作用域" class="headerlink" title="作用域"></a>作用域</h3><p>js中只有函数作用域和全局作用域</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">var</span> scope=<span class="hljs-string">&quot;global&quot;</span>;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">t</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(scope);<br>    <span class="hljs-keyword">var</span> scope=<span class="hljs-string">&quot;local&quot;</span>   <span class="hljs-comment">//变量声明</span><br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(scope);<br>&#125;<br><span class="hljs-title function_">t</span>();  <span class="hljs-comment">//undefined  local</span><br></code></pre></td></tr></table></figure>

<p><strong>es5之前，Js没有块级作用域</strong>[  块级作用域——&gt;  {  }  ]</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">var</span> name=<span class="hljs-string">&quot;global&quot;</span>;<br><span class="hljs-keyword">if</span>(<span class="hljs-literal">true</span>)&#123;<br>    <span class="hljs-keyword">var</span> name=<span class="hljs-string">&quot;local&quot;</span>;   <span class="hljs-comment">//相当于全局中重新定义赋值</span><br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(name)  <span class="hljs-comment">//local</span><br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(name);  <span class="hljs-comment">//local</span><br></code></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">function</span> <span class="hljs-title function_">t</span>(<span class="hljs-params">flag</span>)&#123;<br>    <span class="hljs-keyword">if</span>(flag)&#123;<br>        <span class="hljs-keyword">var</span> s=<span class="hljs-string">&quot;ifscope&quot;</span>;<br>        <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i&lt;<span class="hljs-number">2</span>;i++) <br>            ;<br>    &#125;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(i);  <span class="hljs-comment">// 2</span><br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(s);  <span class="hljs-comment">// ifscope</span><br>&#125;<br><span class="hljs-title function_">t</span>(<span class="hljs-literal">true</span>);<br></code></pre></td></tr></table></figure>

<p><strong>作用域链</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs js">name=<span class="hljs-string">&quot;lwy&quot;</span>;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">t</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-keyword">var</span> name=<span class="hljs-string">&quot;tlwy&quot;</span>;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">s</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-keyword">var</span> name=<span class="hljs-string">&quot;slwy&quot;</span>;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(name);<br>    &#125;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">ss</span>(<span class="hljs-params"></span>)&#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(name);<br>    &#125;<br>    <span class="hljs-title function_">s</span>();   <span class="hljs-comment">// slwy</span><br>    <span class="hljs-title function_">ss</span>();  <span class="hljs-comment">// tlwy</span><br>&#125;<br><span class="hljs-title function_">t</span>();<br></code></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;html&gt;<br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span></span><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">function</span> <span class="hljs-title function_">buttonInit</span>(<span class="hljs-params"></span>)&#123;</span></span><br><span class="language-javascript"><span class="language-xml">	<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">1</span>;i&lt;<span class="hljs-number">4</span>;i++)&#123;</span></span><br><span class="language-javascript"><span class="language-xml">		<span class="hljs-keyword">var</span> b=<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;button&quot;</span>+i);</span></span><br><span class="language-javascript"><span class="language-xml">		b.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">&quot;click&quot;</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123; <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;Button&quot;</span>+i);&#125;,<span class="hljs-literal">false</span>);</span></span><br><span class="language-javascript"><span class="language-xml">	&#125;</span></span><br><span class="language-javascript"><span class="language-xml">&#125;</span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-variable language_">window</span>.οnlοad=buttonInit;</span></span><br><span class="language-javascript"><span class="language-xml"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></span><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span></span><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;button1&quot;</span>&gt;</span>Button1<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;button2&quot;</span>&gt;</span>Button2<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;button3&quot;</span>&gt;</span>Button3<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span><br><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></span><br><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></span><br></code></pre></td></tr></table></figure>

<p>当注册事件结束后，i的值为4，当点击按钮时，事件函数即function(){ alert(“Button”+i);}这个匿名函数中没有i,根据作用域链，所以到buttonInit函数中找，此时i的值为4，<br>所以弹出”button4“。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> num1 = <span class="hljs-number">55</span>;</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> num2 = <span class="hljs-number">66</span>;</span><br><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">function</span> <span class="hljs-title function_">f1</span>(<span class="hljs-params">num,num1</span>)&#123;</span><br><span class="language-javascript">            <span class="hljs-comment">//相当于 var num = 55;</span></span><br><span class="language-javascript">            <span class="hljs-comment">// var num1 = 66;</span></span><br><span class="language-javascript">            num = <span class="hljs-number">100</span>;  <span class="hljs-comment">//将55重新赋值为100</span></span><br><span class="language-javascript">            num1 = <span class="hljs-number">100</span>;  <span class="hljs-comment">//将66重新赋值为100</span></span><br><span class="language-javascript">            num2 = <span class="hljs-number">100</span>; <span class="hljs-comment">//由于f1中没有声明num2 所以向外查找  将全局的num2赋值为100</span></span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num); <span class="hljs-comment">//100</span></span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num1); <span class="hljs-comment">//100</span></span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num2); <span class="hljs-comment">//100</span></span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-title function_">f1</span>(num1,num2)    <span class="hljs-comment">// 100 100 100</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num1); <span class="hljs-comment">// 55  [ 只是提供值 并没有改变 ]</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num2); <span class="hljs-comment">// 100 [ f1中没有声明num2 所以向外查找 改变了nue2 ]</span></span><br><span class="language-javascript">        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num); <span class="hljs-comment">// 全局作用域中没有num  报错    [ 没找到变量  报错    、    没找到属性  undefined ]</span></span><br><span class="language-javascript"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><br>f1(num1,num2) 相当于给函数f1的形参num,num1赋值---&gt;f1(55，66) 【提供值的作用】   <br>实际与var num1 = 55、var num2 = 66 的值无关 <br></code></pre></td></tr></table></figure>

<hr>
<p>作用域，原型链，构造函数，闭包，ajax，数据类型</p>
<h3 id="数据类型"><a href="#数据类型" class="headerlink" title="数据类型"></a>数据类型</h3><ul>
<li><strong>基本数据类型：Number、String、Boolean、unfined、null、symbol</strong></li>
<li><strong>引用数据类型：Object    [  object、array、function  ]、 Set、Map</strong></li>
</ul>
<p>typeof运算符的返回类型为<a target="_blank" rel="noopener" href="https://so.csdn.net/so/search?q=%E5%AD%97%E7%AC%A6%E4%B8%B2&spm=1001.2101.3001.7020">字符串</a>，值包括如下几种：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-number">1.</span> <span class="hljs-string">&#x27;undefined&#x27;</span>              --未定义的变量或值<br><br><span class="hljs-number">2.</span> <span class="hljs-string">&#x27;boolean&#x27;</span>                 --布尔类型的变量或值<br><br><span class="hljs-number">3.</span> <span class="hljs-string">&#x27;string&#x27;</span>                     --字符串类型的变量或值<br><br><span class="hljs-number">4.</span> <span class="hljs-string">&#x27;number&#x27;</span>                  --数字类型的变量或值<br><br><span class="hljs-number">5.</span> <span class="hljs-string">&#x27;object&#x27;</span>                    --对象类型的变量或值，或者<span class="hljs-title function_">null</span>(这个是js历史遗留问题，将<span class="hljs-literal">null</span>作为object类型处理)<br><br><span class="hljs-number">6.</span> <span class="hljs-string">&#x27;function&#x27;</span>                 --函数类型的变量或值<br><br><span class="hljs-number">7.</span> <span class="hljs-string">&quot;symbol&quot;</span>                 --<span class="hljs-title class_">Symbol</span> (<span class="hljs-title class_">ECMAScript</span> <span class="hljs-number">2015</span> 新增)<br><br></code></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">// 使用 Array.isArray 或者 Object.prototype.toString.call</span><br><span class="hljs-comment">// 区分数组和普通对象</span><br><span class="hljs-keyword">typeof</span> [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">4</span>] === <span class="hljs-string">&#x27;object&#x27;</span>;<br><br><span class="hljs-keyword">typeof</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>() === <span class="hljs-string">&#x27;object&#x27;</span>;<br><span class="hljs-keyword">typeof</span> /regex/ === <span class="hljs-string">&#x27;object&#x27;</span>; <span class="hljs-comment">// 历史结果请参阅正则表达式部分</span><br></code></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">// 下面的例子令人迷惑，非常危险，没有用处。避免使用它们。</span><br><span class="hljs-keyword">typeof</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Boolean</span>(<span class="hljs-literal">true</span>) === <span class="hljs-string">&#x27;object&#x27;</span>;<br><span class="hljs-keyword">typeof</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Number</span>(<span class="hljs-number">1</span>) === <span class="hljs-string">&#x27;object&#x27;</span>;<br><span class="hljs-keyword">typeof</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">String</span>(<span class="hljs-string">&#x27;abc&#x27;</span>) === <span class="hljs-string">&#x27;object&#x27;</span>;<br><br><span class="hljs-comment">// 函数</span><br><span class="hljs-keyword">typeof</span> <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) &#123;&#125; === <span class="hljs-string">&#x27;function&#x27;</span>;<br><span class="hljs-keyword">typeof</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">C</span> &#123;&#125; === <span class="hljs-string">&#x27;function&#x27;</span><br><span class="hljs-keyword">typeof</span> <span class="hljs-title class_">Math</span>.<span class="hljs-property">sin</span> === <span class="hljs-string">&#x27;function&#x27;</span>;<br></code></pre></td></tr></table></figure>



<p><strong>symbol</strong></p>
<p>***<code>Reflect.ownKeys()</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">// Object.keys()不能遍历symbol</span><br><span class="hljs-comment">// Reflect.ownKeys()遍历symbol</span><br><span class="hljs-keyword">var</span> person = &#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;zs&#x27;</span>,<br>    <span class="hljs-attr">age</span>:<span class="hljs-number">12</span>,<br>    [<span class="hljs-title class_">Symbol</span>(<span class="hljs-string">&#x27;level&#x27;</span>)]:<span class="hljs-string">&quot;A&quot;</span><br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">keys</span>(person));<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Reflect</span>.<span class="hljs-title function_">ownKeys</span>(person));<br></code></pre></td></tr></table></figure>



<p> **Reflect.ownKeys(target)**是返回所有的属性key，包括不可枚举类型，不包括继承的属性（Reflect.ownKeys返回一个由目标对象自身的属性键组成的数组。）</p>
<p>**Object.keys(obj)**返回遍历对象可枚举类型的属性，不包括继承的属性（Object.keys()方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。）</p>
<p>**Object.getOwnPropertyNames()**方法返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括Symbol值作为名称的属性）组成的数组。</p>
<p>返回属性的个数：Reflect.ownKeys(target)  &gt;  Object.getOwnPropertyNames()  &gt;  Object.keys(obj)</p>
<p>Reflect.ownKeys返回所有的属性不管是不是可枚举<br>Object.keys返回可枚举的属性</p>
<p>可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性，对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 true，对于通过 Object.defineProperty 等定义的属性，该标识值默认为 false。<br>属性的所有权是通过判断该属性是否直接属于某个对象决定的，而不是通过原型链继承的。</p>
<hr>
<h3 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h3><ul>
<li>①所有实例对象都有一个<code>__proto__</code>(隐式原型)属性，属性值是一个普通的对象</li>
<li>②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象</li>
<li>③所有引用类型的<code>__proto__</code>属性指向它构造函数的prototype</li>
</ul>
<figure class="highlight abnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs abnf">实例.__proto__ <span class="hljs-operator">=</span><span class="hljs-operator">=</span><span class="hljs-operator">=</span> 构造函数.prototype<span class="hljs-comment">; // true</span><br></code></pre></td></tr></table></figure>

<p><strong>原型链</strong><br>当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的<code>__proto__</code>隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的<code>__proto__</code>中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。</p>
<p>在查找某个属性时，会执行下面步骤：</p>
<hr>
<h3 id="ajax"><a href="#ajax" class="headerlink" title="ajax"></a>ajax</h3><p>是<code>前后台交互的能⼒</code> 也就是我们<code>客户端给服务端发送消息的⼯具</code>，在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。（无刷新更新页面）</p>
<p>xjax优缺点:</p>
<ul>
<li>不需要插件的⽀持，原⽣ js 就可以使⽤</li>
<li>⽤户体验好（<code>不需要刷新⻚⾯就可以更新数据</code>）</li>
<li><code>减轻服务端和带宽的负担</code></li>
<li>缺点：搜索引擎的⽀持度不够，因为数据都不在⻚⾯上，搜索引擎搜索不到</li>
</ul>
<p><strong>配置链接信息</strong> </p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>AJAX实例<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">language</span>=<span class="hljs-string">&quot;javascript&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><span class="language-javascript">   </span><br><span class="language-javascript">    <span class="hljs-keyword">function</span> <span class="hljs-title function_">ajaxHttpRequestFunc</span>(<span class="hljs-params"></span>)&#123;</span><br><span class="language-javascript">		<span class="hljs-keyword">let</span> xmlHttpRequest;  <span class="hljs-comment">// 创建XMLHttpRequest对象，即一个用于保存异步调用对象的变量</span></span><br><span class="language-javascript">		<span class="hljs-keyword">if</span>(<span class="hljs-variable language_">window</span>.<span class="hljs-property">ActiveXObject</span>)&#123; <span class="hljs-comment">// IE浏览器的创建方式</span></span><br><span class="language-javascript">            xmlHttpRequest = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ActiveXObject</span>(<span class="hljs-string">&quot;Microsoft.XMLHTTP&quot;</span>);</span><br><span class="language-javascript">        &#125;<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(<span class="hljs-variable language_">window</span>.<span class="hljs-property">XMLHttpRequest</span>)&#123; <span class="hljs-comment">// Netscape浏览器中的创建方式</span></span><br><span class="language-javascript">            xmlHttpRequest = <span class="hljs-keyword">new</span> <span class="hljs-title class_">XMLHttpRequest</span>();</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">		xmlHttpRequest.<span class="hljs-property">onreadystatechange</span>=<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)&#123; <span class="hljs-comment">// 设置响应http请求状态变化的事件</span></span><br><span class="language-javascript">            <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;请求过程&#x27;</span>, xmlHttpRequest.<span class="hljs-property">readyState</span>);</span><br><span class="language-javascript">			<span class="hljs-keyword">if</span>(xmlHttpRequest.<span class="hljs-property">readyState</span> == <span class="hljs-number">4</span>)&#123; <span class="hljs-comment">// 判断异步调用是否成功,若成功开始局部更新数据</span></span><br><span class="language-javascript">				<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;状态码为&#x27;</span>, xmlHttpRequest.<span class="hljs-property">status</span>);</span><br><span class="language-javascript">				<span class="hljs-keyword">if</span>(xmlHttpRequest.<span class="hljs-property">status</span> == <span class="hljs-number">200</span>) &#123;</span><br><span class="language-javascript">					<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;异步调用返回的数据为：&#x27;</span>, xmlHttpRequest .<span class="hljs-property">responseText</span>);</span><br><span class="language-javascript">					<span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;myDiv&quot;</span>).<span class="hljs-property">innerHTML</span> = xmlHttpRequest .<span class="hljs-property">responseText</span>; <span class="hljs-comment">// 局部刷新数据到页面</span></span><br><span class="language-javascript">				&#125; <span class="hljs-keyword">else</span> &#123; <span class="hljs-comment">// 如果异步调用未成功,弹出警告框,并显示错误状态码</span></span><br><span class="language-javascript">					<span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;error:HTTP状态码为:&quot;</span>+xmlHttpRequest.<span class="hljs-property">status</span>);</span><br><span class="language-javascript">				&#125;</span><br><span class="language-javascript">			&#125;</span><br><span class="language-javascript">		&#125;</span><br><span class="language-javascript">		xmlHttpRequest.<span class="hljs-title function_">open</span>(<span class="hljs-string">&quot;GET&quot;</span>,<span class="hljs-string">&quot;https://www.runoob.com/try/ajax/ajax_info.txt&quot;</span>,<span class="hljs-literal">true</span>); <span class="hljs-comment">// 创建http请求，并指定请求得方法（get）、url（https://www.runoob.com/try/ajax/ajax_info.txt）以及验证信息。布尔值，表示请求是否为异步，默认为true。如果设为false，则send()方法只有等到收到服务器返回了结果，才会进行下一步操作。</span></span><br><span class="language-javascript">		xmlHttpRequest.<span class="hljs-title function_">send</span>(<span class="hljs-literal">null</span>); <span class="hljs-comment">// 发送请求</span></span><br><span class="language-javascript">    &#125;</span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;myDiv&quot;</span>&gt;</span>原数据<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span> = <span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">value</span> = <span class="hljs-string">&quot;更新数据&quot;</span> <span class="hljs-attr">onclick</span> = <span class="hljs-string">&quot;ajaxHttpRequestFunc()&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span> <br></code></pre></td></tr></table></figure>



<hr>
<h3 id="值类型和引用类型的传递"><a href="#值类型和引用类型的传递" class="headerlink" title="值类型和引用类型的传递"></a>值类型和引用类型的传递</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript"></span><br><span class="language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">Person</span>(<span class="hljs-params">name,age,salary</span>)&#123;</span><br><span class="language-javascript">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">name</span> = name;</span><br><span class="language-javascript">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">age</span> = age;</span><br><span class="language-javascript">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">salary</span> = salary;</span><br><span class="language-javascript">&#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">f1</span>(<span class="hljs-params">person</span>)&#123;</span><br><span class="language-javascript">    <span class="hljs-comment">//相当于 var person = p   </span></span><br><span class="language-javascript">    <span class="hljs-comment">// [ p 是 new Person(&#x27;zs&#x27;,18,1000); 存储在栈中的地址  相当于person也指向了new Person(&#x27;zs&#x27;,18,1000);]</span></span><br><span class="language-javascript">    <span class="hljs-comment">// 也就是说 p、person 两个变量同时指向一个堆空间</span></span><br><span class="language-javascript">    person.<span class="hljs-property">name</span> = <span class="hljs-string">&#x27;ls&#x27;</span>;  <span class="hljs-comment">// 修改了new Person(&#x27;zs&#x27;,18,1000); 中的name</span></span><br><span class="language-javascript">    person = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Person</span>(<span class="hljs-string">&#x27;aa&#x27;</span>,<span class="hljs-number">18</span>,<span class="hljs-number">10</span>) <span class="hljs-comment">//堆内存中有创建一个空间 new Person(&#x27;aa&#x27;,18,10) 并改变了person的指向 [ 因为赋值了 ]</span></span><br><span class="language-javascript">    <span class="hljs-comment">// p 指向第一个对象   person指向第二个对象</span></span><br><span class="language-javascript">&#125;</span><br><span class="language-javascript"><span class="hljs-keyword">var</span> p = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Person</span>(<span class="hljs-string">&#x27;zs&#x27;</span>,<span class="hljs-number">18</span>,<span class="hljs-number">1000</span>);</span><br><span class="language-javascript"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(p.<span class="hljs-property">name</span>);   <span class="hljs-comment">// zs</span></span><br><span class="language-javascript"><span class="hljs-title function_">f1</span>(p); </span><br><span class="language-javascript"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(p.<span class="hljs-property">name</span>); <span class="hljs-comment">// ls</span></span><br><span class="language-javascript"></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>



<hr>
<h3 id="封装函数进行字符串驼峰命名的转换"><a href="#封装函数进行字符串驼峰命名的转换" class="headerlink" title="封装函数进行字符串驼峰命名的转换"></a>封装函数进行字符串驼峰命名的转换</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-comment">// 已知有字符串foo=&#x27;get-element-by-id&#x27;，写一个函数将其转换成驼峰表示法&#x27;getElementById&#x27;</span></span><br><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-keyword">let</span> foo=<span class="hljs-string">&#x27;get-element-by-id&#x27;</span></span><br><span class="language-javascript">    <span class="hljs-keyword">let</span> foo2=<span class="hljs-string">&#x27;get-element-by-calss&#x27;</span></span><br><span class="language-javascript">    <span class="hljs-keyword">function</span> <span class="hljs-title function_">f1</span>(<span class="hljs-params">str</span>)&#123;</span><br><span class="language-javascript">        <span class="hljs-keyword">let</span> arr = str.<span class="hljs-title function_">split</span>(<span class="hljs-string">&#x27;-&#x27;</span>)</span><br><span class="language-javascript">        <span class="hljs-keyword">let</span> res = <span class="hljs-string">&#x27;&#x27;</span></span><br><span class="language-javascript">        <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i = <span class="hljs-number">1</span>; i &lt; arr.<span class="hljs-property">length</span>; i++)&#123;            </span><br><span class="language-javascript">            <span class="hljs-comment">// console.log(arr[i].charAt().toUpperCase()+ arr[i].slice(1));</span></span><br><span class="language-javascript">            res += arr[i].<span class="hljs-title function_">charAt</span>().<span class="hljs-title function_">toUpperCase</span>() + arr[i].<span class="hljs-title function_">slice</span>(<span class="hljs-number">1</span>)  </span><br><span class="language-javascript">            <span class="hljs-comment">// 数组第几个  字符串第一个  转大写      除去字符串第一个的其余</span></span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">        <span class="hljs-keyword">return</span>(arr[<span class="hljs-number">0</span>] + res);</span><br><span class="language-javascript">        <span class="hljs-comment">// 数组第一个 +  转成首字母大写的部分    </span></span><br><span class="language-javascript">    &#125;</span><br><span class="language-javascript">    <span class="hljs-keyword">const</span> string = <span class="hljs-title function_">f1</span>(foo)</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(string);</span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>



<hr>
<h3 id="冒泡排序"><a href="#冒泡排序" class="headerlink" title="冒泡排序"></a>冒泡排序</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-comment">// 冒泡排序</span></span><br><span class="language-javascript">    <span class="hljs-keyword">let</span> arr = [<span class="hljs-number">7</span>,<span class="hljs-number">5</span>,<span class="hljs-number">1</span>,<span class="hljs-number">9</span>,<span class="hljs-number">8</span>,<span class="hljs-number">6</span>,<span class="hljs-number">5</span>,<span class="hljs-number">6</span>]</span><br><span class="language-javascript">    <span class="hljs-comment">// 第几轮里面比较第几次  ----&gt;  两个for循环嵌套</span></span><br><span class="language-javascript">    <span class="hljs-comment">// 第一轮里面找出最大的一个  第二轮找到第二大的   .....</span></span><br><span class="language-javascript">    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; arr.<span class="hljs-property">length</span>-<span class="hljs-number">1</span>; i++)&#123;    <span class="hljs-comment">//比较轮数</span></span><br><span class="language-javascript">        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> j = <span class="hljs-number">0</span>; j &lt; arr.<span class="hljs-property">length</span>-<span class="hljs-number">1</span>-i; j++) &#123;  <span class="hljs-comment">//比较次数</span></span><br><span class="language-javascript">            <span class="hljs-keyword">let</span> tep = <span class="hljs-number">0</span></span><br><span class="language-javascript">            <span class="hljs-keyword">if</span>(arr[j] &gt; arr[j+<span class="hljs-number">1</span>])&#123;</span><br><span class="language-javascript">                tep = arr[j]</span><br><span class="language-javascript">                arr[j] = arr[j+<span class="hljs-number">1</span>]</span><br><span class="language-javascript">                arr[j+<span class="hljs-number">1</span>] = tep</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript">        &#125; </span><br><span class="language-javascript">    &#125;a</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);</span><br><span class="language-javascript"></span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>



<hr>
<h3 id="反转数组"><a href="#反转数组" class="headerlink" title="反转数组"></a>反转数组</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-comment">// 反转数组</span></span><br><span class="language-javascript">    <span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>, <span class="hljs-number">6</span>, <span class="hljs-number">7</span>, <span class="hljs-number">8</span>, <span class="hljs-number">9</span>, <span class="hljs-number">10</span>]</span><br><span class="language-javascript">    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(arr.<span class="hljs-property">length</span> / <span class="hljs-number">2</span>); i++) &#123;</span><br><span class="language-javascript">        <span class="hljs-keyword">let</span> temp = arr[i]</span><br><span class="language-javascript">        arr[i] = arr[arr.<span class="hljs-property">length</span> - i - <span class="hljs-number">1</span>]</span><br><span class="language-javascript">        arr[arr.<span class="hljs-property">length</span> - i - <span class="hljs-number">1</span>] = temp</span><br><span class="language-javascript">    &#125;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);</span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>



<hr>
<h3 id="数组去重"><a href="#数组去重" class="headerlink" title="数组去重"></a>数组去重</h3><h4 id="1-indexOf"><a href="#1-indexOf" class="headerlink" title="1.indexOf"></a>1.<code>indexOf</code></h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">    <span class="hljs-comment">// 数组去重</span></span><br><span class="language-javascript">    <span class="hljs-keyword">let</span> arr1 = [<span class="hljs-number">1</span>,<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>,<span class="hljs-number">55</span>,<span class="hljs-number">4</span>,<span class="hljs-number">4</span>]</span><br><span class="language-javascript">    <span class="hljs-keyword">let</span> arr2 = []</span><br><span class="language-javascript">    arr2.<span class="hljs-title function_">push</span>(arr1[<span class="hljs-number">0</span>])</span><br><span class="language-javascript">    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i = <span class="hljs-number">1</span>; i &lt; arr1.<span class="hljs-property">length</span>; i++)&#123;</span><br><span class="language-javascript">        <span class="hljs-keyword">if</span>(arr2.<span class="hljs-title function_">indexOf</span>(arr1[i]) === -<span class="hljs-number">1</span>)&#123;</span><br><span class="language-javascript">            arr2.<span class="hljs-title function_">push</span>(arr1[i])</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">    &#125;</span><br><span class="language-javascript">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr2);</span><br><span class="language-javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="2-includes"><a href="#2-includes" class="headerlink" title="2.includes"></a>2.<code>includes</code></h4><p>与<code>indexof</code>一个道理，<strong>indexof 找不到返回 -1 ，includes 找不到返回 false</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">// 数组去重</span><br><span class="hljs-keyword">let</span> arr1 = [<span class="hljs-number">1</span>, <span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">55</span>, <span class="hljs-number">4</span>, <span class="hljs-number">4</span>]<br><span class="hljs-keyword">let</span> arr2 = []<br>arr2.<span class="hljs-title function_">push</span>(arr1[<span class="hljs-number">0</span>])<br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">1</span>; i &lt; arr1.<span class="hljs-property">length</span>; i++) &#123;<br>    <span class="hljs-keyword">if</span> (arr2.<span class="hljs-title function_">includes</span>(arr1[i]) === <span class="hljs-literal">false</span>) &#123;<br>        arr2.<span class="hljs-title function_">push</span>(arr1[i])<br>    &#125;<br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr2);<br></code></pre></td></tr></table></figure>

<h4 id="3-filter-indexOf"><a href="#3-filter-indexOf" class="headerlink" title="3.filter+indexOf"></a>3.filter+indexOf</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">2</span>,<span class="hljs-number">36</span>,<span class="hljs-number">12</span>,<span class="hljs-number">2</span>,<span class="hljs-number">5</span>,<span class="hljs-number">36</span>,<span class="hljs-number">36</span>,<span class="hljs-number">12</span>,<span class="hljs-number">26</span>,<span class="hljs-number">65</span>,<span class="hljs-number">65</span>]<br>arr  = arr.<span class="hljs-title function_">filter</span>(<span class="hljs-function">(<span class="hljs-params">item,index,arr</span>)=&gt;</span>&#123;<br>    <span class="hljs-comment">// index为数组中值得索引 2-&gt;0  36-&gt;1  12-&gt;2  2-&gt;3  5-&gt;4 ...</span><br>    <span class="hljs-comment">// arr.indexOf(item,0) 为返回第一次找的值的索引  2-&gt;0  36-&gt;1  12-&gt;2  2-&gt;0  5-&gt;4 ....</span><br>    <span class="hljs-comment">// 如果两次的索引值相等 就返回 （过滤了索引相同的值）</span><br>    <span class="hljs-comment">// indexOf 返回第一次找的值的索引</span><br>    <span class="hljs-keyword">return</span> arr.<span class="hljs-title function_">indexOf</span>(item,<span class="hljs-number">0</span>) === index<br>&#125;)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);<br></code></pre></td></tr></table></figure>

<h4 id="4-双重for循环"><a href="#4-双重for循环" class="headerlink" title="4.双重for循环"></a>4.双重<code>for</code>循环</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">2</span>,<span class="hljs-number">36</span>,<span class="hljs-number">12</span>,<span class="hljs-number">2</span>,<span class="hljs-number">5</span>,<span class="hljs-number">36</span>,<span class="hljs-number">36</span>,<span class="hljs-number">12</span>,<span class="hljs-number">26</span>,<span class="hljs-number">65</span>,<span class="hljs-number">65</span>]<br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>,len = arr.<span class="hljs-property">length</span>; i &lt; len; i++)&#123;<br>    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> j = i+<span class="hljs-number">1</span>, len = arr.<span class="hljs-property">length</span>; j &lt; len; j++) &#123;<br>        <span class="hljs-keyword">if</span>(arr[i] === arr[j])&#123;<br>            arr.<span class="hljs-title function_">splice</span>(i,<span class="hljs-number">1</span>)<br>            j--  <span class="hljs-comment">//每减一个 就少一个</span><br>            len--<br>        &#125;<br>    &#125; <br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr); <br></code></pre></td></tr></table></figure>

<h4 id="5-Set"><a href="#5-Set" class="headerlink" title="5.Set"></a>5.Set</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">2</span>,<span class="hljs-number">36</span>,<span class="hljs-number">12</span>,<span class="hljs-number">2</span>,<span class="hljs-number">5</span>,<span class="hljs-number">36</span>,<span class="hljs-number">36</span>,<span class="hljs-number">12</span>,<span class="hljs-number">26</span>,<span class="hljs-number">65</span>,<span class="hljs-number">65</span>]<br><span class="hljs-comment">// var newArr = new Set(arr)</span><br><span class="hljs-keyword">var</span> newArr = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Set</span>()<br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i <span class="hljs-keyword">in</span> arr)&#123;<br>        newArr.<span class="hljs-title function_">add</span>(arr[i])<br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(newArr);  <span class="hljs-comment">//set的数据结构</span><br><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(newArr));  <span class="hljs-comment">//转化为数组 </span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>([...newArr]);   <span class="hljs-comment">//转化为数组</span><br></code></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">//将类数组结构转化为数组实例</span><br><span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>()<br><span class="hljs-title class_">Array</span>.<span class="hljs-title function_">of</span>()<br></code></pre></td></tr></table></figure>

<h4 id="6-reduce"><a href="#6-reduce" class="headerlink" title="6.reduce"></a>6.reduce</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">1</span>,<span class="hljs-number">3</span>,<span class="hljs-number">6</span>,<span class="hljs-number">9</span>,<span class="hljs-number">6</span>,<span class="hljs-number">9</span>,<span class="hljs-number">6</span>,<span class="hljs-number">6</span>]<br><span class="hljs-keyword">var</span> newArr = arr.<span class="hljs-title function_">reduce</span>(<span class="hljs-function">(<span class="hljs-params">pre,cur</span>)=&gt;</span>&#123;<br>    <span class="hljs-keyword">if</span>(!pre.<span class="hljs-title function_">includes</span>(cur))&#123;<br>        pre.<span class="hljs-title function_">push</span>(cur)<br>    &#125;<br>    <span class="hljs-keyword">return</span> pre<br>&#125;, [])<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(newArr);  <span class="hljs-comment">//[1, 2, 3, 6, 9]</span><br></code></pre></td></tr></table></figure>

                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
    <div class="post-meta mr-3 d-flex align-items-center">
      <i class="iconfont icon-category"></i>
      

<span class="category-chains">
  
  
    
      <span class="category-chain">
        
  <a href="/categories/%E7%AC%94%E8%AE%B0/" class="category-chain-item">笔记</a>
  
  

      </span>
    
  
</span>

    </div>
  
  
    <div class="post-meta">
      <i class="iconfont icon-tags"></i>
      
        <a href="/tags/%E5%89%8D%E7%AB%AF/">#前端</a>
      
    </div>
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>JavaScript笔记（一）</div>
      <div>https://dl_coisini.gitee.io/2023/04/27/JavaScript笔记/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>d-lue</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2023年4月27日</div>
        </div>
      
      
      
        <div class="license-meta-item">
          <div>许可协议</div>
          <div>
            
              
              
                <a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
                  <span class="hint--top hint--rounded" aria-label="BY - 署名">
                    <i class="iconfont icon-by"></i>
                  </span>
                </a>
              
            
          </div>
        </div>
      
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2023/05/25/JavaScript%E9%A2%98%E7%9B%AE/" title="JavaScript题目（一）">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">JavaScript题目（一）</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2023/04/26/flex/" title="flex">
                        <span class="hidden-mobile">flex</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="margin-left: -1rem">
    <div id="toc">
  <p class="toc-header">
    <i class="iconfont icon-list"></i>
    <span>目录</span>
  </p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
  
    <div class="statistics">
  
  

  
    
      <span id="busuanzi_container_site_pv" style="display: none">
        总访问量 
        <span id="busuanzi_value_site_pv"></span>
         次
      </span>
    
    
      <span id="busuanzi_container_site_uv" style="display: none">
        总访客数 
        <span id="busuanzi_value_site_uv"></span>
         人
      </span>
    
    
  
</div>

  
  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>




  
    <script  src="/js/img-lazyload.js" ></script>
  




  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init(Object.assign({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      scrollSmooth    : true,
      includeTitleTags: true,
      headingsOffset  : -boardTop,
    }, CONFIG.toc));
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }

    Fluid.events.registerRefreshCallback(function() {
      if ('tocbot' in window) {
        tocbot.refresh();
        var toc = jQuery('#toc');
        if (toc.length === 0 || !tocbot) {
          return;
        }
        if (toc.find('.toc-list-item').length > 0) {
          toc.css('visibility', 'visible');
        }
      }
    });
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.11/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));

    Fluid.events.registerRefreshCallback(function() {
      if ('anchors' in window) {
        anchors.removeAll();
        var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
        var res = [];
        for (var item of el) {
          res.push('.markdown-body > ' + item.trim());
        }
        if (CONFIG.anchorjs.placement === 'left') {
          anchors.options.class = 'anchorjs-link-left';
        }
        anchors.add(res.join(', '));
      }
    });
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/js/local-search.js" ></script>

  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"log":false,"model":{"jsonPath":"/live2dw/assets/hijiki.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"react":{"opacity":0.7}});</script></body>
</html>
